<template>
    <div class="chart" :ref="name" :style="{'height': height}"></div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import {debounce} from '@/assets/js/debounce.js'
const animationDuration = 6000;
export default {
    props: {
        name: {type: String},
        echartsOption: {type: Object},
        theme: {type: String, default: function(){return 'light'}},
        height: {type: String, default: function(){return '300px'}},
    },
    data(){
        return{
            chart: null,
        }
    },
    created(){
        
    },
    watch:{
        echartsOption:{
            handler(newVal,oldVal){
                if(this.chart){
                    this.initChart();
                }
            },
            deep: true            
        }
    },
    //初始化
    mounted() {
        this.initChart();
        this.resizeHandler = debounce(() => {
            if (this.chart) {
                this.chart.resize();
            }
        }, 100)
        window.addEventListener('resize', this.resizeHandler);
    },
    //销毁
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        window.removeEventListener('resize', this.resizeHandler);
        this.chart.dispose();
        this.chart = null;
    },
    methods:{
        initChart() {
            this.chart = echarts.init(this.$el, this.theme);            
            this.chart.setOption(this.echartsOption);
        }
    }
}
</script>